<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Navbar | Silentdoer Home</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="icon" href="../favicon.ico" type="image/x-icon"/>

	<link rel="stylesheet" href="../css/fonts.css">
	<link rel="stylesheet" href="../plugins/bootstrap-4.3.1-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
	<link rel="stylesheet" href="../plugins/ionicons/dist/css/ionicons.min.css">
	<link rel="stylesheet" href="../plugins/icon-kit/dist/css/iconkit.min.css">
	<link rel="stylesheet" href="../plugins/perfect-scrollbar/css/perfect-scrollbar.css">
	<link rel="stylesheet" href="../plugins/weather-icons/css/weather-icons.min.css">
	<link rel="stylesheet" href="../css/theme.css">
	<script src="../js/modernizr-2.8.3.min.js"></script>
</head>

<body id="page-top">
<!--[if lt IE 8]>
<p class="browserupgrade">请换成<strong>Firefox或Chrome等主流浏览器</strong>访问。。</p>
<![endif]-->

<div class="wrapper">
	<script src="../header.js"></script>

	<div class="page-wrap">
		<!-- 左侧导航栏 -->
		<script src="../sidebar.js"></script>

		<div class="main-content">
			<div class="container-fluid">
				<div class="page-header">
					<div class="row align-items-end">
						<div class="col-lg-8">
							<div class="page-header-title">
								<i class="ik ik-menu bg-blue"></i>
								<div class="d-inline">
									<h5>Navbar</h5>
									<span>lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<nav class="breadcrumb-container" aria-label="breadcrumb">
								<ol class="breadcrumb">
									<li class="breadcrumb-item">
										<a href="../index.html"><i class="ik ik-home"></i></a>
									</li>
									<li class="breadcrumb-item active" aria-current="page">Navbar</li>
								</ol>
							</nav>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div class="card">
							<div class="card-header">
								<h3>Header Color</h3>
							</div>
							<div class="card-body">
								<h4 class="sub-title">header-theme="light"</h4>
								<p class="mb-10">Add <code>header-theme="light"</code> attribute in
									<code>.header-top</code> class</p>
								<img src="../img/navbar/light.jpg" class="img-fluid border p-1 rounded" alt="">

								<h4 class="sub-title mt-30">header-theme="dark"</h4>
								<p class="mb-10">Add <code>header-theme="dark"</code> attribute in
									<code>.header-top</code> class</p>
								<img src="../img/navbar/dark.jpg" class="img-fluid border p-1 rounded" alt="">

								<h4 class="sub-title mt-30">header-theme="blue"</h4>
								<p class="mb-10">Add <code>header-theme="blue"</code> attribute in
									<code>.header-top</code> class</p>
								<img src="../img/navbar/blue.jpg" class="img-fluid border p-1 rounded" alt="">

								<h4 class="sub-title mt-30">header-theme="red"</h4>
								<p class="mb-10">Add <code>header-theme="red"</code> attribute in
									<code>.header-top</code> class</p>
								<img src="../img/navbar/red.jpg" class="img-fluid border p-1 rounded" alt="">

								<h4 class="sub-title mt-30">header-theme="orange"</h4>
								<p class="mb-10">Add <code>header-theme="orange"</code> attribute in
									<code>.header-top</code> class</p>
								<img src="../img/navbar/orange.jpg" class="img-fluid border p-1 rounded" alt="">

								<h4 class="sub-title mt-30">header-theme="green"</h4>
								<p class="mb-10">Add <code>header-theme="green"</code> attribute in
									<code>.header-top</code> class</p>
								<img src="../img/navbar/green.jpg" class="img-fluid border p-1 rounded" alt="">

								<h4 class="sub-title mt-30">header-theme="purple"</h4>
								<p class="mb-10">Add <code>header-theme="purple"</code> attribute in
									<code>.header-top</code> class</p>
								<img src="../img/navbar/purple.jpg" class="img-fluid border p-1 rounded" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../footer.js"></script>

		<!-- 这两个聊天框定义的位置不能乱放，放其他地方可能会没法弹出框 -->
		<!-- 点击消息item后右侧弹出的聊天框 -->
		<aside class="right-sidebar">
			<div class="sidebar-chat" data-plugin="chat-sidebar">
				<div class="sidebar-chat-info">
					<h6>Chat List</h6>
					<form class="mr-t-10">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Search for friends ...">
							<i class="ik ik-search"></i>
						</div>
					</form>
				</div>
				<div class="chat-list">
					<div class="list-group row">
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Gene Newman">
							<figure class="user--online">
								<img src="../img/users/1.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Gene Newman</span>  <span
									class="username">@gene_newman</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Billy Black">
							<figure class="user--online">
								<img src="../img/users/2.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Billy Black</span>  <span
									class="username">@billyblack</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Herbert Diaz">
							<figure class="user--online">
								<img src="../img/users/3.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Herbert Diaz</span>  <span class="username">@herbert</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Sylvia Harvey">
							<figure class="user--online">
								<img src="../img/users/4.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Sylvia Harvey</span>  <span class="username">@sylvia</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item active" data-chat-user="Marsha Hoffman">
							<figure class="user--busy">
								<img src="../img/users/5.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Marsha Hoffman</span>  <span
									class="username">@m_hoffman</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Mason Grant">
							<figure class="user--offline">
								<img src="../img/users/1.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Mason Grant</span>  <span
									class="username">@masongrant</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Shelly Sullivan">
							<figure class="user--offline">
								<img src="../img/users/2.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Shelly Sullivan</span>  <span
									class="username">@shelly</span></span>
						</a>
					</div>
				</div>
			</div>
		</aside>

		<!-- 点击好友头像后弹出的聊天框 -->
		<div class="chat-panel" hidden>
			<div class="card">
				<div class="card-header d-flex justify-content-between">
					<a href="javascript:void(0);"><i class="ik ik-message-square text-success"></i></a>
					<span class="user-name">John Doe</span>
					<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
				</div>
				<div class="card-body">
					<div class="widget-chat-activity flex-1">
						<div class="messages">
							<div class="message media reply">
								<figure class="user--online">
									<a href="#">
										<img src="../img/users/3.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Epic Cheeseburgers come in all kind of styles.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="../img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Cheeseburgers make your knees weak.</p>
								</div>
							</div>
							<div class="message media reply">
								<figure class="user--offline">
									<a href="#">
										<img src="../img/users/5.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Cheeseburgers will never let you down.</p>
									<p>They'll also never run around or desert you.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="../img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>A great cheeseburger is a gastronomical event.</p>
								</div>
							</div>
							<div class="message media reply">
								<figure class="user--busy">
									<a href="#">
										<img src="../img/users/5.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>There's a cheesy incarnation waiting for you no matter what you palete
										preferences are.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="../img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>If you are a vegan, we are sorry for you loss.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<form action="javascript:void(0)" class="card-footer" method="post">
					<div class="d-flex justify-content-end">
						<textarea class="border-0 flex-1" rows="1" placeholder="Type your message here"></textarea>
						<button class="btn btn-icon" type="submit"><i class="ik ik-arrow-right text-success"></i>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


<div class="modal fade apps-modal" id="appsModal" tabindex="-1" role="dialog" aria-labelledby="appsModalLabel"
	 aria-hidden="true" data-backdrop="false">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ik ik-x-circle"></i></button>
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="quick-search">
				<div class="container">
					<div class="row">
						<div class="col-md-4 ml-auto mr-auto">
							<div class="input-wrap">
								<input type="text" id="quick-search" class="form-control" placeholder="Search..."/>
								<i class="ik ik-search"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-body d-flex align-items-center">
				<div class="container">
					<div class="apps-wrap">
						<div class="app-item">
							<a href="#"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-mail"></i><span>Message</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-users"></i><span>Accounts</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-shopping-cart"></i><span>Sales</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-briefcase"></i><span>Purchase</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-server"></i><span>Menus</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-clipboard"></i><span>Pages</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-message-square"></i><span>Chats</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-map-pin"></i><span>Contacts</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-box"></i><span>Blocks</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-calendar"></i><span>Events</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-bell"></i><span>Notifications</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-pie-chart"></i><span>Reports</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-layers"></i><span>Tasks</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-edit"></i><span>Blogs</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-settings"></i><span>Settings</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-more-horizontal"></i><span>More</span></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery-3.4.1.js"><\/script>')</script>
<script src="../plugins/popper.js/dist/umd/popper.min.js"></script>
<script src="../plugins/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="../plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
<script src="../plugins/screenfull/dist/screenfull.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/theme.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
	(function (b, o, i, l, e, r) {
		b.GoogleAnalyticsObject = l;
		b[l] || (b[l] =
			function () {
				(b[l].q = b[l].q || []).push(arguments)
			});
		b[l].l = +new Date;
		e = o.createElement(i);
		r = o.getElementsByTagName(i)[0];
		e.src = 'https://www.google-analytics.com/analytics.js';
		r.parentNode.insertBefore(e, r)
	}(window, document, 'script', 'ga'));
	ga('create', 'UA-XXXXX-X', 'auto');
	ga('send', 'pageview');
</script>-->

<script>
	new Vue({
		el: '#app-header'
		, data() {
			let urlPrefix = 'http://localhost:8080';
			let userAvatar = urlPrefix + '/img/user.jpg';
			let usersAvatar1 = urlPrefix + '/img/users/1.jpg';
			return {
				urlPrefix,
				userAvatar,
				usersAvatar1
			};
		}
	});
</script>

<script>
	// FLAG vue for sidebar.html
	class UriUtils {
		static isRelativeUri(uri) {
			if (uri !== undefined && uri !== null && uri !== '') {
				if (uri.startsWith("/")) {
					return true;
				} else {
					return false;
				}
			}
			throw new Error('arg is not valid uri');
		}

		static isBlankUri(uri) {
			if (uri === undefined || uri === null || uri === '') {
				return true;
			}
			return false;
		}

		static getUrlRelativePath() {
			const url = document.location.toString();
			const arrUrl = url.split("//");

			let start = arrUrl[1].indexOf("/");
			//stop省略，截取从start开始到结尾的所有字符
			let relUrl = arrUrl[1].substring(start);

			if(relUrl.indexOf("?") !== -1){
				relUrl = relUrl.split("?")[0];
			}
			return relUrl;
		}
	}

	class SidebarHeader {
		// 构造方法，只要触发new实例化操作即执行，由于js里方法参数没有类型，且可以不传所有参数，因为没法重载
		constructor(linkUrl, logoUrl, brandName) {
			if (typeof linkUrl === 'string') {
				this.linkUrl = linkUrl;
				this.logoUrl = logoUrl;
				this.brandName = brandName;
			} else {
				this.constructorJSON(linkUrl);
			}
		}

		constructorJSON(json) {
			this.linkUrl = json.linkUrl;
			this.logoUrl = json.logoUrl;
			this.brandName = json.brandName;
		}

		// ES7也可以在构造方法外面定义实例属性，和定义实例方法的方式是一样的，即（最好加个默认值，不然怪怪的）
		//linkUrl;
		// ES7里定义静态方法和变量其实就是前面加个static关键字即可；
	}

	// 可以约定，以_开头的方法或属性都是私有的（当然外部仍然可以调用，只是给开发者自己看）
	class SidebarItem {
		// 构造方法，只要触发new实例化操作即执行
		constructor(linkUrl, itemName, iconType, badge, badgeType, active, hasSub, subItems) {
			if (typeof linkUrl === 'string') {
				this.linkUrl = linkUrl;
				this.itemName = itemName;
				this.iconType = iconType;
				this.badge = badge;
				this.badgeType = json.badgeType;
				this.active = active;
				this.hasSub = hasSub;
				this.subItems = subItems;
			} else {
				this.constructorJSON(linkUrl);
			}

			// 通用属性定义（已作废）
			this.additionalClass = '';

			// 还可以这样定义实例方法
			this.hasSubItems = () => {
				if (this.hasSub === true && this.subItems !== undefined && this.subItems.length > 0) {
					return true;
				}
				return false;
			}
		}

		constructorJSON(json) {
			this.linkUrl = json.linkUrl;
			this.itemName = json.itemName;
			this.iconType = json.iconType;
			this.badge = json.badge;
			this.badgeType = json.badgeType;
			this.active = json.active;
			this.hasSub = json.hasSub;
			this.subItems = json.subItems;
		}

		// 注意在class类中，方法之间不需要添加逗号
		isActive() {
			return this.active === true;
		}
	}

	new Vue({
		el: '#app-sidebar'
		, data() {
			let protocol = 'http';
			let urlPrefix = protocol + '://' + window.location.host;

			return {
				urlPrefix,
				/*也可以设置默认值*/
				sidebarHeader: null,
				sidebarItemsNavigation: null
			};
		}
		, methods: {
			async fetchSidebarHeader() {
				try {
					// fetch是浏览器自带的，默认是GET
					this.sidebarHeader = await fetch(`${this.urlPrefix}/demovuebootstrap/api/application/index/sidebarHeader`)
						.then(res => res.json())
						.then(data => {
							let result = new SidebarHeader(data);
							if (UriUtils.isRelativeUri(result.linkUrl)) {
								result.linkUrl = this.urlPrefix + result.linkUrl;
							}
							if (UriUtils.isRelativeUri(result.logoUrl)) {
								result.logoUrl = this.urlPrefix + result.logoUrl;
							}
							return result;
						});
				} catch (err) {
					console.log('Load SidebarHeader failed! ' + err);
				}
			}
			, async fetchSidebarItems() {
				try {
					// fetch是浏览器自带的，默认是GET
					this.sidebarItemsNavigation = await fetch(`${this.urlPrefix}/demovuebootstrap/api/application/index/sidebarItems`)
						.then(res => res.json())
						.then(data => {
							let result = [];
							data.forEach(i => {
								let item = new SidebarItem(i);
								if (UriUtils.isBlankUri(item.linkUrl)) {
									item.linkUrl = 'javascript:void(0)';
								} else {
									if (UriUtils.isRelativeUri(item.linkUrl)) {
										item.linkUrl = this.urlPrefix + item.linkUrl;
									}
								}
								/*if (item.linkUrl.search(UriUtils.getUrlRelativePath()) !== -1) {
									item.additionalClass += ' active';
								}
								if (item.hasSubItems()) {
									item.additionalClass += ' has-sub';
								}*/
								if (item.linkUrl.search(UriUtils.getUrlRelativePath()) !== -1) {
									item.active = true;
								}
								// 将服务端的icon type转换为class
								switch (item.iconType) {
									case 'chart':
										item.iconType = ' ik-bar-chart-2';
										break;
									case 'menu':
										item.iconType = ' ik-menu';
										break;
									case 'layers':
										item.iconType = ' ik-layers';
										break;
									default:
										item.iconType = null;
								}
								// 将服务端传来的badge type转换为class
								switch (item.badgeType) {
									case 'success':
										item.badgeType = ' badge-success';
										break;
									case 'danger':
										item.badgeType = ' badge-danger';
										break;
									default:
										item.badgeType = null;
								}
								if (item.hasSubItems()) {
									for (let i = 0; i < item.subItems.length; i++) {
										let subItem = new SidebarItem(item.subItems[i]);
										if (UriUtils.isRelativeUri(subItem.linkUrl)) {
											subItem.linkUrl = this.urlPrefix + subItem.linkUrl;
										}
										// 其实可以移到上面的if里面最后
										item.subItems[i] = subItem;
									}
								}
								result.push(item);
							});
							return result;
						});
				} catch (err) {
					console.log('Load SidebarItems failed! ' + err);
				}
			}
		}
		/*这里面的方法貌似仍然比对v-bind之类的渲染要慢，貌似vue没法在渲染之前获取数据，而是通过v-if来判断没有数据先不展示*/
		, created() {
			this.fetchSidebarHeader();
			this.fetchSidebarItems();
		}
	});
</script>
</body>
</html>
